import React, { useState, useEffect } from 'react';
import { Resizable } from 'react-resizable'; //拖拽第三方库
import { Space, Table, Tag, Button, Input } from 'antd';
import { history, request } from 'umi';
import { CloseOutlined, InfoOutlined } from '@ant-design/icons';
import './index.css';
export default function Index() {
  // 拖拽
  const [dcolumns, setDcolumns] = useState([]);
  const [components, setComponents] = useState({});
  // 数据
  const [list, setList] = useState(
    JSON.parse(sessionStorage.getItem('tasklistji')),
  );
  // 控制添加任务级别的弹出框
  const [isModalOpen, setisModalOpen] = useState(false);
  // 列
  const column = [
    {
      title: '序号',
      dataIndex: 'id',
      width: 50,
      ellipsis: true,
      render: (text, record, index) => `${index + 1}`,
    },
    {
      title: '级别名称',
      dataIndex: 'title',
      width: 50,
      ellipsis: true,
    },
  ];
  // 数据
  let data = [];
  useEffect(() => {});
  //登录之后的用户信息
  const [userMessage, setMessage] = useState(
    JSON.parse(sessionStorage.getItem('userMessage')),
  );

  // 存放任务
  const [task, settakdata] = useState([]);
  // 获取任务列表
  function gettasklist() {
    request('/api/task/tasklist', {
      method: 'get',
    }).then((res) => {
      const newdata1 = [];
      res.userlist.map((item2) => {
        if (item2.zhiperson.length != 0) {
          newdata1.push(item2);
        }
      });
      const newdata = [];
      newdata1.map((item) => {
        if (item.faname == userMessage.username) {
          newdata.push(item);
        }
      });
      settakdata(newdata);
    });
  }
  useEffect(() => {});
  useEffect(() => {
    setDcolumns(column),
      setComponents({
        header: {
          cell: ResizeableTitle,
        },
      });
    gettasklist();
  }, []);
  // 拖拽
  const ResizeableTitle = (props) => {
    const { onResize, width = 100, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }
    return (
      <Resizable width={width} height={0} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index) =>
    (e, { size }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setDcolumns(nextColumns);
    };
  const columns = dcolumns.map((col, index) => ({
    ...col,
    onHeaderCell: (column) => ({
      width: col.width * 1 || 100,
      onResize: handleResize(index),
    }),
  }));
  // 全选
  const rowSelection = {
    type: 'radio',
    selectedRowKeys,
    onChange: (_, selectall) => {
      setSelectedRowKeys(_);
    },
  };
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [newselectedRowKeys, setnewselectedRowKeys] = useState([]);
  function addtaskjibie() {
    setisModalOpen(true);
  }
  function handleOk() {
    setisModalOpen(false);
  }
  function savetaskjibie() {
    const newjibie = {
      id: Date.now().toLocaleString(),
      title: jibie,
    };

    console.log([...list, newjibie]);

    setList([...list, newjibie]);
    sessionStorage.setItem('tasklistji', JSON.stringify(list));
    setisModalOpen(false);
  }
  const [jibie, setjibie] = useState();
  function jibievalue(e) {
    setjibie(e.target.value);
  }
  function deletetaskjibie() {
    const deletelist = list.filter((res) => {
      return res.id != selectedRowKeys;
    });
    console.log(deletelist);
    setList(deletelist);
    sessionStorage.setItem('tasklistji', JSON.stringify(deletelist));
    alert('删除成功');
  }
  return (
    <>
      <div>
        <Button className="user_btn" onClick={addtaskjibie}>
          新增
        </Button>
        <Button className="user_btn">修改</Button>
        <Button className="user_btn" onClick={deletetaskjibie}>
          删除
        </Button>
        <Button className="user_btn">过滤</Button>
        <Button className="user_btn">还原</Button>
        <Button className="user_btn">打印</Button>
        <Button className="user_btn">导入</Button>
        <Button className="user_btn">导出</Button>
        <Button className="user_btn">查看日志</Button>
      </div>
      <div className="mytasktable">
        <Table
          rowSelection={rowSelection}
          components={components}
          pagination={false}
          bordered
          rowKey={(columns) => columns.id}
          columns={columns}
          dataSource={list}
          scroll={{ x: 'max-content', y: '420px' }}
        />
        {/* 分页 */}
        <div className="home_fy">
          <div className="home_fy_left">
            <svg
              t="1675319740940"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7074"
              width="20"
              height="20"
            >
              <path
                d="M872.533 819.627a34.133 34.133 0 0 1-48.213 48.213L492.373 535.893a34.133 34.133 0 0 1 0-48.213L824.32 155.733a34.133 34.133 0 0 1 48.213 48.214L564.907 512z m-341.333 0a34.133 34.133 0 0 1-48.213 48.213l-331.52-331.52a34.133 34.133 0 0 1 0-48.213L483.413 156.16a34.133 34.133 0 0 1 48.214 48.213L223.573 512z"
                fill="#333333"
                p-id="7075"
              ></path>
            </svg>
            <svg
              t="1675319795515"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7214"
              width="20"
              height="20"
            >
              <path
                d="M677.391515 873.916768c-7.86101 0-15.618586-2.999596-21.617778-8.895354L324.473535 533.721212c-11.998384-11.894949-11.998384-31.340606 0-43.235555L655.670303 159.288889c5.999192-5.999192 13.756768-8.895354 21.617778-8.895354 7.757576 0 15.618586 2.999596 21.617778 8.895354 11.894949 11.894949 11.894949 31.237172 0 43.235555L389.223434 512.103434 698.905859 821.785859c11.894949 11.998384 11.894949 31.340606 0 43.235555-5.895758 5.895758-13.756768 8.895354-21.514344 8.895354z m0 0"
                fill="#666666"
                p-id="7215"
              ></path>
            </svg>
            <svg
              t="1675319856049"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7882"
              width="20"
              height="20"
            >
              <path
                d="M531.185456 943.532317c0 8.899694-6.493901 16.114003-14.503319 16.114003l-9.364275 0c-8.010441 0-14.504342-7.214309-14.504342-16.114003L492.81352 80.46666c0-8.898671 6.493901-16.114003 14.504342-16.114003l9.364275 0c8.009418 0 14.503319 7.215332 14.503319 16.114003L531.185456 943.532317z"
                p-id="7883"
              ></path>
            </svg>
            <span style={{ marginRight: '10px' }}>第</span>
            <input style={{ marginRight: '10px' }} type="text" value="1" />
            <span style={{ marginRight: '5px' }}>页，共</span>
            <span style={{ marginRight: '5px' }}>1</span>
            <span>页</span>
            <svg
              t="1675319856049"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7882"
              width="20"
              height="20"
            >
              <path
                d="M531.185456 943.532317c0 8.899694-6.493901 16.114003-14.503319 16.114003l-9.364275 0c-8.010441 0-14.504342-7.214309-14.504342-16.114003L492.81352 80.46666c0-8.898671 6.493901-16.114003 14.504342-16.114003l9.364275 0c8.009418 0 14.503319 7.215332 14.503319 16.114003L531.185456 943.532317z"
                p-id="7883"
              ></path>
            </svg>
            <svg
              t="1675320084570"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11159"
              width="20"
              height="20"
            >
              <path
                d="M151.467 204.373a34.133 34.133 0 1 1 48.213-48.213l331.947 331.947a34.133 34.133 0 0 1 0 48.213L199.68 867.84a34.133 34.133 0 1 1-48.213-48.213L459.093 512z m341.333 0a34.133 34.133 0 0 1 48.213-48.213L872.96 488.107a34.133 34.133 0 0 1 0 48.213L541.013 868.267a34.133 34.133 0 0 1-48.213-48.214L800.427 512z"
                fill="#333333"
                p-id="11160"
              ></path>
            </svg>
            <svg
              t="1675320111791"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="12072"
              width="20"
              height="20"
            >
              <path
                d="M386.640017 196.405191 687.536947 487.723004c13.840827 13.408717 13.840827 35.135036 0 48.543753s-36.293132 13.408717-50.156485 0L336.483532 244.948944c-13.840827-13.408717-13.840827-35.135036 0-48.543753S372.777687 182.996474 386.640017 196.405191z"
                fill="#879196"
                p-id="12073"
              ></path>
              <path
                d="M336.483532 779.073583l300.895906-291.351603c13.863354-13.408717 36.316683-13.408717 50.156485 0 13.840827 13.408717 13.840827 35.135036 0 48.543753L386.640017 827.617336c-13.863354 13.408717-36.316683 13.408717-50.156485 0S322.642705 792.437246 336.483532 779.073583z"
                fill="#879196"
                p-id="12074"
              ></path>
            </svg>
          </div>
          <div className="home_fy_right">
            显示
            <span>1-10</span>
            条，共<span>10</span>条
          </div>
        </div>
        {/* 弹框 */}
        <div
          className="taskjibie"
          style={{ display: isModalOpen ? '' : 'none' }}
        >
          <div className="logininfotop">
            <p>提示对话框</p>
            <span className="logininfotopcha" onClick={handleOk}>
              <CloseOutlined />
            </span>
          </div>
          <div>
            <div style={{ marginTop: '20px' }}>
              <Button className="user_btn" onClick={savetaskjibie}>
                保存
              </Button>
              <Button className="user_btn">保存且新增</Button>
              <Button className="user_btn">草稿箱</Button>
            </div>
            <div
              style={{ display: 'flex', marginTop: '20px', marginLeft: '20px' }}
            >
              任务级别:
              <Input
                placeholder="请输入任务级别"
                onChange={jibievalue}
                style={{ width: '300px', height: '30px' }}
              />
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
